<template>
  <div class="detail">
    <detail-nav-bar/>
    <scroll class="content" ref="scroll">
      <detail-banner :top-images="topImages"/>
    </scroll>
  </div>
</template>

<script>
import { getDetail, Goods, GoodsParam, Shop } from '@/network/home/detail'
import DetailNavBar from '@/views/detail/detailChild/DetailNavBar'
import Scroll from '@/components/common/scroll/Scroll'
import Banner from '@/components/common/swiper/Banner'
import DetailBanner from '@/views/detail/detailChild/DetailBanner'

export default {
  name: 'Detail',
  components: { DetailBanner, Banner, Scroll, DetailNavBar },
  props: {},
  data () {
    return {
      iid: null,
      goods: {},
      detailInfo: {},
      paramInfo: {},
      shop: {},
      topImages: []
    }
  },
  computed: {},
  created () {

  },
  mounted () {
    this.getPageDetail()
  },
  methods: {
    getPageDetail () {
      this.iid = this.$route.query.iid
      getDetail(this.iid).then(res => {
        if (1001 === res.status.code) {
          const data = res.result
          // 获取顶部图片
          this.topImages = data.itemInfo.topImages
          console.log(this.topImages)

          // 获取商品
          this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

          // 3.创建店铺信息的对象
          this.shop = new Shop(data.shopInfo)

          // 4.保存商品的详情数据
          this.detailInfo = data.detailInfo

          // 5.获取参数的信息
          this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
        }
      }).catch(err => {
        alert(err)
      })
    }
  }
}
</script>

<style scoped>
.detail {
  position: relative;
  z-index: 9;
  background: #ffffff;
  height: 100vh;
}

.content {
  height: calc(100% - 44px);
  padding-top: 44px;
}
</style>
